<script setup lang="ts">
defineOptions({
  name: 'MicroAppLoading',
})
import { storeToRefs } from 'pinia'
import { useMicroAppsStore } from '@/stores/microApps'

const microAppsStore = useMicroAppsStore()
const { loading, error } = storeToRefs(microAppsStore)
</script>

<template>
  <div v-if="loading || error" class="micro-app-loading">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-if="error" class="error-container">
      <div class="error-icon">❌</div>
      <p class="error-message">{{ error.message }}</p>
      <button @click="microAppsStore.reset()" class="retry-button">重试</button>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
